<!-- 商品分类列表 -->
<template>
  <s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
	  
	  <view class="topViewClass">
	  		 
	  		 <scroll-view scroll-x class="topViewscrollViewClass" :scroll-with-animation="true"   :scroll-into-view="state.scrollIntoViewId">
		
	  		   <view
	  		     class="catabox" 
	  		     v-for="(item, index) in state.categoryList"
	  		     :key="item.id"
				 :id="'scrollIntoViewId'+item.id"
	  		     :class="[{ 'menu-item-active': index === state.activeMenu }]"
	  		     @tap="onMenu(index)"
	  		   >    		
	  			<view>		
	  				  <image class="goods-img" :src="item.picUrl" mode="aspectFill" />		
	  			</view>  		      
	  		    <view class="goods-title ">{{ item.name }}</view>
	  		   </view>
	  		 </scroll-view>
	  				  
	   </view>
	   
    <view class="s-category">
			
      <view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
        <!-- 商品分类（左） -->
        <scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
          <view
            class="menu-item ss-flex"
            v-for="(item, index) in state.categoryList[state.activeMenu].children"
            :key="item.id"
            :class="[{ 'menu-item-active': index === state.childactiveMenu }]"
            @tap="onChliedMenu(index)"
          >
            <view class="menu-title ss-line-1">
              {{ item.name }}  
            </view>
          </view>
        </scroll-view>
        <!-- 商品分类（右） -->
        <scroll-view
          class="goods-list-box"
          scroll-y
          :style="[{ height: pageHeight + 'px' }]"
          v-if="state.categoryList?.length"
		   @scroll="onScroll"
        >
          <first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
          <first-two v-if="state.style === 'first_two'" :pagination="state.pagination"   @onclickcart ="cickcart" @onNumberChange="onNumberChange($event, index)"/>
          <second-one
            v-if="state.style === 'second_one'"
            :data="state.categoryList"
            :childactiveMenu="state.childactiveMenu"
          />
          <uni-load-more
            v-if="
              (state.style === 'first_one' || state.style === 'first_two') &&
              state.pagination.total > 0
            "
            :status="state.loadStatus"
            :content-text="{
              contentdown: '点击查看更多',
            }"
            @tap="loadMore"
          />
        </scroll-view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import secondOne from './components/second-one.vue';
  import firstOne from './components/first-one.vue';
  import firstTwo from './components/first-two.vue';
  import sheep from '@/sheep';
  import $store from '@/sheep/store';
  import CategoryApi from '@/sheep/api/product/category';
  import SpuApi from '@/sheep/api/product/spu';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { showAuthModal, showShareModal } from '@/sheep/hooks/useModal';
  import { computed, reactive } from 'vue';
  import _ from 'lodash-es';
  import { handleTree } from '@/sheep/util';
   import CartApi from '@/sheep/api/trade/cart'

  const state = reactive({
    style: 'first_two', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
    categoryList: [], // 商品分类树
    activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
	childactiveMenu:0,
    scrollIntoViewId: '',
    pagination: {
      // 商品分页
      list: [], // 商品列表
      total: [], // 商品总数
      pageNo: 1,
      pageSize: 6,
    },
    loadStatus: '',
	isload:false
  });

  const { safeArea } = sheep.$platform.device;
  const pageHeight = computed(() => safeArea.height - 44 - 50 -80);
const userInfo = computed(() => sheep.$store('user').userInfo);
  // 加载商品分类
  async function getList() {
    const { code, data } = await CategoryApi.getCategoryList();
    if (code !== 0) {
      return;
    }	
    state.categoryList = handleTree(data);
  }

  // 选中菜单
  const onMenu = (val) => {
    state.activeMenu = val;
    if (state.style === 'first_one' || state.style === 'first_two') {
      state.pagination.pageNo = 1;
      state.pagination.list = [];
      state.pagination.total = 0;
      getGoodsList();
    }
  };
  
  // 选中子菜单
  const onChliedMenu = (val) => {
    state.childactiveMenu = val;
    if (state.style === 'first_one' || state.style === 'first_two') {
      state.pagination.pageNo = 1;
      state.pagination.list = [];
      state.pagination.total = 0;
      getGoodsList();
    }
  };

  // 加载商品列表
  async function getGoodsList() {
    // 加载列表
    state.loadStatus = 'loading';
	
	// console.log( state.categoryList)
    const res = await SpuApi.getSpuPage({
      categoryId: state.categoryList[state.activeMenu].children[state.childactiveMenu].id,
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize,
	   userId:userInfo.value.id
    });
    if (res.code !== 0) {
      return;
    }
	
	console.log(res.data.list)
    // 合并列表
    state.pagination.list = _.concat(state.pagination.list, res.data.list);
    state.pagination.total = res.data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	state.isload =  state.pagination.list.length < state.pagination.total ? true : false;
		
  }
  
 async function cickcart (e){
	  
	   if (!$store('user').isLogin) {
	  	    showAuthModal();
	  	    return;
	  	  }
		  
		  
		  const { data, code } = await CartApi.addCart({
			  
		      	      count:state.pagination.list[e].skuIds[0].purchaseMinimum,
		      	      skuId:state.pagination.list[e].skuIds[0].skuId,	
		  });
		  // 刷新购物车列表
		  if (code === 0) {
		  		
		  	state.pagination.list[e].skuIds[0].cartCount = data
		  		
		      sheep.$store('cart').getList();	
		  }
	  	  	 
	  	  
  };

  async  function onNumberChange(dict){
	  
  	   if (dict.number === state.pagination.list[dict.index].skuIds[0].purchaseMinimum-1) {     		       
  	    const { data, code } = await CartApi.deleteByCart({
  	      skuId:state.pagination.list[dict.index].skuIds[0].skuId,
  	    
  	    });     
  	    // 刷新购物车列表
  	    if (code === 0) {    		
  			  state.pagination.list[dict.index].skuIds[0].cartCount = 0	    		
  	          sheep.$store('cart').getList();			
  	    } 
  	   }else{    		   
  		   const { data, code } = await CartApi.addCart({
  		     skuId: state.pagination.list[dict.index].skuIds[0].skuId,
  		     count:dict.number,
  		   });
  		   // 刷新购物车列表
  		   if (code === 0) {
  		   		   		   			
  		     sheep.$store('cart').getList();	
  		   } 		      		   
  		   
  	   }
  
  	
  };

  // 加载更多商品
  function loadMore() {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getGoodsList();
  }

  onLoad(async (params) => {
    await getList();
    // 首页点击分类的处理：查找满足条件的分类  需要字型转换
    const foundCategory = state.categoryList.find(category => category.id === parseInt(params.id));
    // 如果找到则调用 onMenu 自动勾选相应分类，否则调用 onMenu(0) 勾选第一个分类
    onMenu(foundCategory ? state.categoryList.indexOf(foundCategory) : 0);
	state.scrollIntoViewId = 'scrollIntoViewId'  + params.id
		
  });
 // onScroll
  function onScroll(e) {
	  
	  // console.log("华东")
   // console.log(e)
   
     // this.scrollTop = event.detail.scrollTop;
                   if (state.loadStatus === 'more' && state.isload ) {
                       console.log("滚动到底部，有加载更多数据");
					   state.isload  = false
					    loadMore();
                       // 加载更多数据的逻辑
                       // const newData = [6, 7, 8];
                       // this.dataList = this.dataList.concat(newData);
                   }
  }

  onReachBottom(() => {
	  
    loadMore();
  });
</script>

<style lang="scss" scoped>
  .s-category {
    :deep() {
      .side-menu-wrap {
        width: 200rpx;
        height: 100%;
        padding-left: 12rpx;
        background-color: #f6f6f6;

        .menu-item {
          width: 100%;
          height: 88rpx;
          position: relative;
          transition: all linear 0.2s;

          .menu-title {
            line-height: 32rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #333;
            margin-left: 28rpx;
            position: relative;
            z-index: 0;

            &::before {
              content: '';
              width: 64rpx;
              height: 12rpx;
              background: linear-gradient(
                90deg,
                var(--ui-BG-Main-gradient),
                var(--ui-BG-Main-light)
              ) !important;
              position: absolute;
              left: -64rpx;
              bottom: 0;
              z-index: -1;
              transition: all linear 0.2s;
            }
          }

          &.menu-item-active {
            background-color: #fff;
            border-radius: 20rpx 0 0 20rpx;

            &::before {
              content: '';
              position: absolute;
              right: 0;
              bottom: -20rpx;
              width: 20rpx;
              height: 20rpx;
              background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
            }

            &::after {
              content: '';
              position: absolute;
              top: -20rpx;
              right: 0;
              width: 20rpx;
              height: 20rpx;
              background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
            }

            .menu-title {
              font-weight: 600;

              &::before {
                left: 0;
              }
            }
          }
        }
      }

      .goods-list-box {
        background-color: #fff;
        width: calc(100vw - 100px);
        padding: 10px;
      }

      .banner-img {
        width: calc(100vw - 130px);
        border-radius: 5px;
        margin-bottom: 20rpx;
      }
    }
	
	
  }
  ::-webkit-scrollbar{
       width: 0;
       height: 0;
       color: transparent;
       }
  
  .topViewClass {
  	
  	
	
  	// background-color: red;
  	
  }
  
  
  .topViewscrollViewClass {
  	
  	display: flex;
	// flex-direction: row;
 //  	justify-content: space-around;
  	// background-color: yellow;

	justify-items: center;
    // width: 300rpx;
	  width: 100%;
  	height: 200rpx;
	overflow-x: auto;
	white-space: nowrap; /* 防止内部元素换行 */
  	
  }
 
  .catabox{
  	display: inline-block;
  	width: 180rpx;
    height: 200rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
    margin-left: 20rpx;
  	// background-color: blue;
	text-align: center;
  }
  
  .goods-img {
    width: calc(80rpx);
    height: calc(80rpx);
  }
  
  .goods-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
	padding-top: 10rpx;
    line-height: 40rpx;
    text-align: center;
  }
  
  .menu-item-active {
    background-color: #fff;
    border-radius: 20rpx 0 0 20rpx;
  
    ::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: -20rpx;
      width: 20rpx;
      height: 20rpx;
      background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
    }
  
    ::after {
      content: '';
      position: absolute;
      top: -20rpx;
      right: 0;
      width: 20rpx;
      height: 20rpx;
      background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
    }
	.menu-title {
	  font-weight: 600;
	
	  ::before {
	    left: 0;
	  }
	}
   	}
</style>
